<template>
	<view class="actor-body">
        <view class="actor-options-title">选择选手</view>
        <view class="actor-options">
            <view class="actor-option" v-for="(actor,index) in actorList" :key="index" @click="change(actor)">
                <view class="inner-imagebox bg-line-color">
                    <image
                    :src="actor.logo"
                    mode="aspectFit"
                    :lazy-load="true"
                    />
                </view>
                <view class="actor-option-desc">
                    <text>{{actor.name}} / {{actor.playRole}}</text>
                    {{ actor.introduce }}
                </view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref ,defineProps,onMounted} from 'vue'
import { wzActorList } from "@/api/baseData"

const emit = defineEmits([
    'change'
])

const change = (actor : any) => {
    emit('change',actor)
}
const actorList = ref<any>([])
onMounted(() => {
    wzActorList({
        pageSize:100,
        pageNo:1
    }).then(res => {
        actorList.value = res.data.records
    })
})
</script>
<style lang="scss">
.actor-body{
    width: 100%;
    height: 100%;
    flex: 1;
    .actor-options-title{
        padding:32upx;
        font-weight: 600;
    }
    .actor-options{
        padding: 32rpx 83rpx;
        width: 100%;
        box-sizing: border-box;
        height: 92%;
        overflow: hidden;
        overflow-y: scroll;
        .actor-option{
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: url(https://wx.sijiyoufu.com/static/imgs/project/power-actor-select-bg.png) center no-repeat;
            background-size: contain;
            border-radius: 9px;
            margin: 0 auto 52rpx;
            padding: 32rpx;
            position: relative;
            width: 590rpx;
            height: 160rpx;
            box-sizing: border-box;
            .actor-option-desc{
                display: flex;
                flex-direction: column;
                width: 72%;
                font-size: 24rpx;
                text-align: right;
                padding-left: 130rpx;
                color:#fff;
                text{
                    font-size: 32upx;
                    font-weight: 600;
                    padding-bottom: 6upx;
                    text-align: left;
                }
            }
            .inner-imagebox{
                width: 160rpx;
                height: 160rpx;
                border-radius: 220rpx;
                box-sizing: border-box;
                position: absolute;
                left: -21px;
                image{
                    width: 160rpx;
                    height: 160rpx;
                    border-radius: 204rpx;
                }
            }
        }
    }
}
</style>